import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
const pathSrc = path.resolve(__dirname, "src");
export default ({ command, mode }) => {
  return defineConfig({
    base: "./",
    resolve: {
      alias: {
        "~/": `${pathSrc}/`,
        "@/": `${pathSrc}/`, // 引入的时候 简便方法  @/ => /src/
        "@/u": `${pathSrc}/utils/*`, // 引入的时候 简便方法  @/u/ => /src/utils/
        "@/hooks": `${pathSrc}/hooks/*`,
      },
    },
    define: {},
    server: {
      open: true,
      host: "localhost",
      port: 1687, //更改启动端口
      //hmr: false,
      // 代理
      proxy: {
        "/api": {
          // target: 'http://localhost:154/', //代理的地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, "/api"),
        },
      },
    },

    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use "~/styles/variables.module.scss" as *;
          @use "~/styles/mixin.module.scss" as *; 
          `,
        },
      },
    },

    plugins: [
      vue(),
      VueSetupExtend(),
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue"],
        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver(),
          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: "Icon",
          }),
        ],

        dts: path.resolve(pathSrc, "auto-imports.d.ts"),
      }),

      Components({
        dirs: ["src/components"], // , 'src/views/...'
        // 按需引入组件，不需要在import 了！
        extensions: ["vue", "md"],
        // 允许自动引入的组件尾缀！
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.ts$/],
        resolvers: [
          ElementPlusResolver({
            importStyle: "sass",
          }),
        ],
        dts: "src/components.d.ts", // 自动引入文件后，生成的文件列表，js版注释掉
      }),
      Icons({
        autoInstall: true,
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/icons/svg")], // 指定需要缓存的图标文件夹
        symbolId: "[name]", // 指定symbolId格式
      }),
    ],
    optimizeDeps: {
      include: [
        "vue",
        "vue-router",
        "vue-types",
        "element-plus/es/locale/lang/zh-cn",
        "element-plus/es/locale/lang/en",
        "@iconify/iconify",
        "@vueuse/core",
        "axios",
      ],
    },
  });
};
